#responsible_container{
    font-family: SFNSDisplay-Regular;
    input,button{
        outline: none;
        font-family: SFNSDisplay-Regular;
    }
    button{
        cursor: pointer;
    }
    .ant-tabs-tab-prev,.ant-tabs-tab-next{
        line-height:43px;
    }
   
    .sign-in, .not-sign-in, .not-responsible-table, .not-sign-in-table{
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #86E76A;
        border: 1px solid #019668;
        display: inline-block;
        margin: 10px 12px 0 26px;
    }
    .not-sign-in{
        background: #C6CFDF;
        border: 1px solid #868C98;
    }
    .not-responsible-table{
        background: #D2434D;
        border: 1px solid #D2434D;
        margin: 0 7px 0 0;
    }
    .not-sign-in-table{
        background: #FF8F01;
        border: 1px solid #FF8F01;
        margin: 0 7px 0 0;
    }
    .responsible-title{
        width: 100%;
        height: 46px;
        // background: #8e729d;
        position: relative;
        font-size: 20px;
        text-align: center;
        line-height: 46px;
        color: #fff;
        background: url('../../assets/images/nav_bg.png');
        background-size: cover;
        i{
            position: absolute;
            left: 30px;
            line-height: 20px;
            top: 13px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
        }
    }

    .responsible-container{
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .responsible-left{
        position:absolute;
        top: 0;
        right: 440px;
        bottom: 0;
        left: 0;
        border-right: 1px solid #cacaca;
        .search-area{
            padding: 10px 12px 10px 30px;
            height: 62px;
            width: 100%;
            display: flex;
            .input-wrap{
                cursor: pointer;
                position: relative;
                height: 38px;
                line-height: 38px;
                border: 1px solid #CACACA;
                border-radius: 4px;
                margin-right: 20px;
                font-size: 18px;
                color: #666666;
                text-align: center;
                flex:1;
                i{
                    color: #9B9B9B;
                    position: absolute;
                    right: 10px;
                }
                input{
                    width: 100%;
                    border:none;
                    text-align: center;
                    background: none;
                }
            }
            .search-btn{
                background: #8E729D;
                border-radius: 4px;
                width: 98px;
                height: 38px;
                color: #fff;
                font-size: 18px;
                border: none;
            }
        }
       
            .ant-tabs-content{
                display: block;
            }
            .ant-tabs-bar{
                height: 49px;
                border-top:1px solid #cacaca;
                border-bottom:1px solid #cacaca;
                .ant-tabs-nav-container{
                    line-height: 2;
                }
            }
            .ant-tabs-nav{
                .ant-tabs-tab{
                    font-size: 16px;
                    color: #666666;
                    line-height: 32px;
                }
           } 
           
             .ant-tabs-tab-active{
                color: #8E729D;
            }
            .ant-tabs-ink-bar{
                background-color: #8E729D;
            }
            .ant-tabs-tab-prev-icon,.ant-tabs-tab-next-icon{
                font-size: 16px;
            }
            .second-nav{
                .ant-tabs-bar{
                    border: none;
                    .ant-tabs-tab{
                        flex: 1;
                        background: #f5f5f5;
                        margin-right: 0;
                        border-right: 1px solid #cacaca;
                        text-align: center;
                        line-height: 16px;
                        height: 50px;
                    }
                        .ant-tabs-tab:nth-child(2){
                            border-radius: 4px 0 0 0;
                        }
                    .ant-tabs-tab:last-child{
                        border: none;
                        border-radius: 0 4px 0 0;
                    }
                    .ant-tabs-tab-active{
                        background: #8E729D;
                        color: #fff;
                        border-color: #8E729D;
                    }
                }
                .ant-tabs-nav{
                    // width: 100%;
                    // display: flex;
                }
                .time-area{
                    font-size: 12px;
                    font-style: normal;
                }
                .second-nav-content{
                    position: absolute;
                    top: 70px;
                    bottom: 20px;
                    left: 6px;
                    right: 0px;
                   
               
                }
                .second-nav-content>div>div{
                    display: flex;
                    flex-wrap: wrap;
                }
               
            }
            .table-list{
                flex: 4;
                width: 100%;
                display: flex;
                flex-direction: column;
                left: 0;
                right: 442px;
                top: 175px;
                bottom: 69px;
                background: #fff;
                border-radius: 4px;
                position: absolute;
                     .item-area{
                        display: flex;
                        flex-wrap: wrap;
                        float: left;
                    }
                    .responsible-item{
                        background: #FFFFFF;
                        border: 1px solid #CACACA;
                        border-radius: 4px;
                        width: 129px;
                        height: 187px;
                        margin: 20px 0px 0px 14px;
                        position: relative;
                        padding-top: 34px;
                        cursor: pointer;
                        .title{
                            background: #8E729D;
                            border-radius: 4px 4px 0 0;
                            height: 34px;
                            font-size: 16px;
                            color: #fff;
                            text-align: center;
                            line-height: 34px;
                            position: absolute;
                            top: -1px;
                            right: -1px;
                            left: -1px;
                            opacity: 1;
                        }
                        .name{
                            font-size: 16px;
                            color: #666666;
                        }
                        .more{
                            text-align: center;
                            font-size: 14px;
                            color: #9B9B9B;
                            line-height: 30px;
                        }
                    }
                    .item-area:last-child{
                         .responsible-item{
                            margin-bottom: 15px;
                        }
                    }
                   
                    #selected-table{
                        background: #E8D9F0;
                        border: 1px solid #8E729D;
                    }
                    .not-responsible-person{
                        .title{
                            background: #D2434D;
                        }
                    }
                    .not-sign-in-person{
                        .title{
                            background: #FF8F01;
                        }
                    }
            }  
        
        .responsible-content-wrap{
            position: fixed;
            left: 0;
            right: 442px;
            top: 157px;
            bottom: 69px;
            background: #EEEEEE;
            border-radius: 4px;
            padding: 10px 20px;
            .responsible-content{
                width: 100%;
                height: 100%;
                background: #fff;
                border-radius: 4px;
            }
        }
       .responsible-bottom{
           position: absolute;
           background: #eee;
           bottom: 0;
           left: 0;
           right: 0;
           height: 69px;
           padding: 15px 20px;
           #show-all{
                background: #82669C;
                border: 1px solid #8E729D;
                border-radius: 4px;
                width: 140px;
                height: 38px;
                font-size: 16px;
                color: #FFFFFF;
                margin-right: 20px;
           }
           .choose-btn{
                background: #FFFFFF;
                border: 1px solid #8E729D;
                border-radius: 4px;
                font-size: 16px;
                color: #8E729D;
                height: 38px;
                width: 200px;
                margin-right: 15px;
           }
           .sign-in-show{
                position: absolute;
                right: 20px;
                top: 15px;
                display: flex;
                flex-wrap: wrap;
                font-size: 16px;
           }
           .btn-noresponsible.active-btn{
                background: #D2434D;
                color: #fff;
                border: none;
                span{
                    background: #fff;
                    border:none;
                }
           }
            .btn-nosign-in.active-btn{
                background: #FF8F01;
                color: #fff;
                border: none;
                span{
                    background: #fff;
                    border:none;
                }
           }
       }
        
    }
    

    .responsible-right{
        position:absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 440px;
        background: #eee;
        .right-title{
            height: 62px;
            line-height: 62px;
            background: #82669C;
            width: 100%;
            font-size: 20px;
            color: #FFFFFF;
            text-align: center;
        }
        .no-responsible-person-box{
            width: 440px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .desk-pic{
                width:200px;
                height: 165px;
                margin: 0 auto;
                .empty-holder{
                    height: 330px;
                }
                i{
                    font-size: 165px;
                    line-height: 165px;
                    color: #C0C0C0;
                }
            }
            .desk-show-msg{
                font-size: 24px;
                color: #C0C0C0;
                text-align: center;
                margin-top: 24px;
            }
        }
        .responsible-info{
            background: #fff;
            position: absolute;
            bottom: 0px;
            left: 0;
            right: 0;
            top: 62px;
            padding-bottom: 60px;
            .info-title{
                height: 49px;
                border-bottom: 1px solid #cacaca;
                display: flex;
                padding: 0 20px;
                .name{
                    font-size: 16px;
                    color: #666666;
                }
                .info{
                    font-size: 16px;
                    color: #1A1A1A;
                }
                div{
                    flex: 1;
                    line-height: 49px;
                }
               
            }
            .info-content{
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                bottom: 0px;
                .info-content-item{
                    // height: 95px;
                    border-bottom: 1px solid #cacaca;
                    .waiter-info{
                        display: flex;
                        height: 40px;
                        line-height: 40px;
                        border-bottom: 1px #cacaca dashed;
                        margin: 0 20px;
                        .list{
                            margin-right: 10px;
                            flex:1;
                            .sign-in, .not-sign-in{
                                margin: 0 5px 0 0;
                            }
                            .name{
                                font-size: 16px;
                                color: #383838;
                            }
                            .title{
                                font-size: 14px;
                                color: #9B9B9B;
                                background: none;
                            }
                            .context{
                                font-size: 14px;
                                color: #1A1A1A;
                            }
                        }
                        .list:nth-child(4){
                            margin-right: 0;
                        }
                    }
                    .service-info{
                        font-size: 16px;
                        color: #9B9B9B;
                        // height: 53px;
                        display: flex;
                        padding: 10px 20px 5px 41px;
                        line-height: 30px;
                        justify-content: space-between;
                        .service{
                            flex:4;
                            // display: flex;
                            p{
                                margin-right: 5px;
                                float: left;
                            }
                        }
                        .adjust-btn{
                            width: 120px;
                            height: 32px;
                            background: #8E729D;
                            border-radius: 4px;
                            border: none;
                            font-size: 14px;
                            color: #FFFFFF;
                            margin-right: 15px;
                            flex: 2;
                        }
                        .del-btn{
                            width: 66px;
                            height: 32px;
                            background: #D2434D;
                            border-radius: 4px;
                            border: none;
                            font-size: 14px;
                            color: #FFFFFF;
                            flex: 1;
                        }
                    }
                }

            }
        }
        .right-bottom{
            position: absolute;
            bottom: 0;
            height: 69px;
            left: 0;
            right: 0;
            text-align: center;
            background: #fff;
            border-top: 1px solid #cacaca;
            button{
                width: 160px;
                height: 44px;
                font-size: 16px;
                color: #FFFFFF;
                background: #8E729D;
                border-radius: 4px;
                border: none;
                margin: 10px 10px 0 10px;
            }
        }
    }
   .noshow{display: none;}
}




